<template>
    <div class="loginlog">
        <memberCentreNav></memberCentreNav>
        <div class="writing_right">
            <div class="TitleList">
                <div class="TitleList_padding">
                    <div class="TitleList_top">
                        <div class="TitleList_top_title"><span></span>最近登录IP</div>
                    </div>
                </div>
                <div class="loginlog_content">
                    <div class="loginlog_content_able">
                        <div class="allflow_content">
                            <div class="allflow_content_list">
                                <div class="content_list_li">序号</div>
                                <div class="content_list_li">登录时间</div>
                                <div class="content_list_li">IP</div>
                                <div class="content_list_li">登录状态</div>
                                <div class="content_list_li">IP所属区域（仅供参考）</div>
                            </div>
                        </div>
                        <div class="allflow_content">
                            <div class="allflow_content_list" v-for="(info, index) in infos.data" :key="index">
                                <div class="content_list_li">{{info.id}}</div>
                                <div class="content_list_li">{{info.create_time}}</div>
                                <div class="content_list_li">{{info.ip}}</div>
                                <div class="content_list_li">
                                    <span v-if="info.state">登录成功</span>
                                    <span v-if="!info.state">登录失败</span>
                                </div>
                                <div class="content_list_li">{{info.address}}</div>
                            </div>
                        </div>
                      <div class="page">
                        <el-pagination
                            @size-change="handleSizeChange"
                            @current-change="handleCurrentChange"
                            :current-page="infos.current_page"
                            :page-sizes="per_pages"
                            :page-size="infos.per_page"
                            layout="total, sizes, prev, pager, next, jumper"
                            :total="infos.total">
                        </el-pagination>
                      </div>
                    </div>
                    
                    <div class="not_data not_data2" v-show="infos.data.length === 0">
                      <div class="not_data_icon"><img src="@a/img/bg26.jpg"/></div>
                      <div class="not_data_title">暂无登录日志</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>


<script>
    import memberCentreNav from "@c/common/memberCentreNav/memberCentreNav";

    export default {
        name: "loginLog",
        data() {
            return {
              infos: {
                data: [],
                per_page: 10,
                current_page: 1,
                last_page: 1,
                total: 0
              },
              per_pages: [10, 20, 30],
            };
        },
        components: {
            memberCentreNav
        },
        methods:{
          //分页
          handleSizeChange(val) {
            this.infos.per_page = val
            this.getList()
          },
          handleCurrentChange(val) {
            this.infos.current_page = val
            this.getList()

          },
          getList() {
            let that = this;
            that.axios.get('/api/member/loginLog', {
              params: {
                page: that.infos.current_page,
                list_rows: that.infos.per_page,
              }
            }).then(res => {
              that.infos = res.result;
            })
          },
        },
        created() {
          this.getList()
        },
    }
</script>

<style>
  @import "loginLog.css";
</style>
